<template>
  <el-form
    :model="couponList[0]"
    :rules="couponRules"
    label-width="0"
    ref="couponRef"
  >
    <el-table :data="couponList" :header-cell-class-name="headerClassHandle">
      <el-table-column label="选择优惠券类型">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.couponType"
            clearable
            placeholder="请选择优惠券类型"
          >
            <el-option label="无门槛折扣券" :value="0" />
            <el-option label="满折劵" :value="2" />
            <el-option label="满减券" :value="3" />
            <el-option label="无门槛现金劵" :value="1" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="优惠券规则">
        <template slot-scope="scope">
          <div v-if="scope.row.couponType === 0">
            <el-form-item prop="discount">
              <el-input-number
                :min="0"
                :max="10"
                :controls="false"
                v-model="scope.row.discount"
                style="width: 80px"
              />折，无门槛使用
            </el-form-item>
          </div>
          <div v-if="scope.row.couponType === 1">
            <el-form-item prop="discountAmount">
              <el-input-number
                :min="1"
                :controls="false"
                v-model="scope.row.discountAmount"
                type="number"
                style="width: 90px"
              />元，无门槛使用
            </el-form-item>
          </div>
          <div v-if="scope.row.couponType === 2" class="ruleStyle">
            <el-form-item prop="discount">
              <el-input-number
                :min="0"
                :max="10"
                :controls="false"
                v-model="scope.row.discount"
                type="number"
                style="width: 90px"
              />折，满
            </el-form-item>
            <el-form-item prop="conditionAmount">
              <el-input-number
                :min="0"
                :controls="false"
                v-model="scope.row.conditionAmount"
                type="number"
                style="width: 90px"
              />元使用
            </el-form-item>
          </div>
          <div v-if="scope.row.couponType === 3" class="ruleStyle">
            <el-form-item prop="discountAmount">
              <el-input-number
                :min="1"
                :controls="false"
                v-model="scope.row.discountAmount"
                type="number"
                style="width: 90px"
              />元，满
            </el-form-item>
            <el-form-item prop="conditionAmount">
              <el-input-number
                :min="0"
                :controls="false"
                v-model="scope.row.conditionAmount"
                type="number"
                style="width: 90px"
              />元使用
            </el-form-item>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Watch, Ref } from "vue-property-decorator";

@Component
export default class CouponRuleForm extends Vue {
  @Ref()
  readonly couponRef: HTMLFormElement;

  couponList = [
    {
      couponType: null,
      discount: "",
      conditionAmount: "",
      discountAmount: "",
    },
  ];

  @Watch("couponList", {
    deep: true,
  })
  update(couponList) {
    this.$emit("update", couponList);
  }

  /**
   * 对整个表单进行校验
   */
  validate() {
    return this.couponRef.validate();
  }

  /**
   * 移除表单项的校验结果
   */
  clearValidate() {
    this.couponList = [
      {
        couponType: 0,
        discount: "",
        conditionAmount: "",
        discountAmount: "",
      },
    ];
  }

  headerClassHandle(row, column, rowIndex, columnIndex) {
    console.log(
      row,
      column,
      rowIndex,
      columnIndex,
      "row, column, rowIndex, columnIndex",
    );
  }

  /** 折扣验证 */
  discountValid(rule, value, callback) {
    const regs = /^\d+.?\d{0,1}$/;
    if (value > 9) {
      callback(new Error("折扣范围为1-9"));
    } else if (value <= 0) {
      callback(new Error("折扣为正整数"));
    } else if (!regs.test(value)) {
      callback(new Error("保留一位小数"));
    } else {
      callback();
    }
  }

  /** 金额验证 */
  discountAmountValid(rule, value, callback) {
    const regs = /^[+]{0,1}(\d+)$/;
    if (!regs.test(value)) {
      callback(new Error("金额请输入整数"));
    } else if (value <= 0) {
      callback(new Error("金额不能小于1"));
    } else if (
      this.couponList[0].couponType === 3 &&
      Number(this.couponList[0].conditionAmount) <
        Number(this.couponList[0].discountAmount)
    ) {
      callback(new Error("优惠金额有误"));
      this.$message.error("优惠金额不能大于满足条件");
    } else {
      callback();
    }
  }

  /** 条件金额 */
  conditionAmountValid(rule, value, callback) {
    const regs = /^[+]{0,1}(\d+)$/;
    if (!regs.test(value)) {
      callback(new Error("满足金额有误"));
    } else if (value <= 0) {
      callback(new Error("金额不能小于1"));
    } else {
      callback();
    }
  }

  couponRules = {
    discount: [
      { required: true, message: "折扣不能为空", trigger: "blur" },
      { validator: this.discountValid, trigger: "blur" },
    ],
    discountAmount: [
      { required: true, message: "金额不能为空", trigger: "blur" },
      { validator: this.discountAmountValid, trigger: "blur" },
    ],
    conditionAmount: [
      { required: true, message: "条件不能为空", trigger: "blur" },
      { validator: this.conditionAmountValid, trigger: "blur" },
    ],
  };
}
</script>

<style lang="scss" scoped>
.ruleStyle {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
